<template>
  <div class="progress-dialog">
    <h2>更新项目进度</h2>
    <form @submit.prevent="save">
      <input
        type="number"
        v-model="progressValue"
        min="0"
        max="100"
        placeholder="输入进度 (0-100)"
      />
      <div class="actions">
        <button type="submit">保存</button>
        <button type="button" @click="close">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  emits: ['close', 'save'],
  data() {
    return {
      progressValue: null
    }
  },
  methods: {
    save() {
      if (this.progressValue >= 0 && this.progressValue <= 100) {
        this.$emit('save', parseInt(this.progressValue))
        this.progressValue = null
      }
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.progress-dialog {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  max-width: 400px;
  margin: 0 auto;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.actions {
  display: flex;
  gap: 10px;
}

button {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type='submit'] {
  background-color: #42b983;
  color: #fff;
}

button[type='button'] {
  background-color: #ccc;
  color: #000;
}
</style>
